/**
 * Created by 小敏哥 on 2017/12/6.
 */
import React, {Component} from 'react';
import style from './index.scss';

class ProcessInstance extends Component {
    constructor(props) {
        super(props);
    }

    static propTypes = {
      content:React.PropTypes.array.isRequired,//构建主体的数组
    };

    //构建主体左端数字
    structLeft(){
        return this.props.content.map((item,index)=>{
            return <div key={index}>
                <div className={style.ball}>{index+1}</div>
                {index!=this.props.content.length-1?<div className={style.solid}></div>:''}
            </div>
        })
    }
    //构建列表主体
    structContent(){
        return this.props.content.map((item,index)=>{
            return <div className={style.processItem} key={index}>
                <div>{item.text}</div>
                {item.tips?<div className={style.tips}>{item.tips}</div>:''}
            </div>
        });
    }

    render(){
        return <div className={style.processContent}>
            <div className={style.left}>
                {this.structLeft()}
            </div>
            <div className={style.content}>
                {this.structContent()}
            </div>
        </div>
    }
}

export default ProcessInstance;